<template>
  <div id="batchList">
    <!-- 上部搜索条件 -->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      id="share-box"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      max-height="490"
      ref="table"
    >
      <el-table-column type="index" width="50" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="taskName"
        label="任务名称"
        min-width="150"
      ></el-table-column>
      <el-table-column prop="category" label="所属分类" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.category | filterName('strategy_category') }}
        </template>
      </el-table-column>
      <el-table-column
        prop="everydayMax"
        label="每日上限（次）"
        min-width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.everydayMax === 0 ? '无限' : scope.row.everydayMax }}
        </template>
      </el-table-column>
      <el-table-column prop="time" label="任务有效期" min-width="100">
        <template slot-scope="scope">
          {{ getTaskTime(scope.row.taskValidity) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="createdByName"
        label="积分状态"
        width="130"
        v-permission="'wh:integralAction:status'"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="true"
            :inactive-value="false"
            active-color="#1DC8A4"
            @change="changeStatus(scope.row.status, scope.row.id, scope.$index)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="showDetail(scope.row)"
            v-permission="'wh:integralAction:checkDetail'"
          >
            查看明细
          </el-button>
          <el-button
            type="text"
            @click="showDialog(scope.row)"
            v-permission="'wh:integralAction:Edit'"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 修改积分弹窗 -->
    <editDialog
      v-if="editDialogData.isShow"
      :dialog-data="editDialogData"
      @refresh="refresh"
    ></editDialog>
    <!-- 查看详情弹窗 -->
    <detailDialog
      v-if="detailDialogData.isShow"
      :dialog-data="detailDialogData"
    ></detailDialog>
  </div>
</template>
<script>
import topSearch from '@component/intergralManagement/integralAction/topSearch' // 上部搜索条件
import editDialog from '@component/intergralManagement/integralAction/editDialog' // 编辑弹窗
import detailDialog from '@component/intergralManagement/integralAction/detailDialog' // 查看详情弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
import { getSearchList } from '@/api/workManagement/videoBatch'
import {
  getList,
  stopStrategy,
  openStrategy
} from '@/api/couponsIntegral/integralAction' //接口
export default {
  name: 'integralAction',
  msg: '互动积分策略-积分列表',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    editDialog,
    detailDialog
  },
  data() {
    return {
      loading: false,
      total: 0,
      // 搜索条件
      formInline: {
        status: '', // 任务状态
        category: '', // 请选择分类
        taskName: '' // 任务名称
      },
      // 表格数据
      tableData: [],
      /*[{ taskName: '首次注册', taskType: 'firstRegisterModifyModel' },
        { taskName: '绑定手机号码', taskType: 'bingPhoneModifyModel' },
        { taskName: '完善个人信息', taskType: 'perfectInformationModifyModel' },
        { taskName: '每日签到', taskType: 'signTaskModifyModel' },
        { taskName: '提交作业', taskType: 'submitJobModifyModel' },
        { taskName: '发布作品动态', taskType: 'publishWorksModifyModel' },
        { taskName: '评论/回复', taskType: 'commentReplyModifyModel' },
        { taskName: '分享', taskType: 'shareTaskModifyModel' },
        { taskName: '喜欢', taskType: 'likeTaskModifyModel' },
        { taskName: '浏览页面', taskType: 'browsePageModifyModel' },
        { taskName: '投票', taskType: 'voteTaskModifyModel' },
        { taskName: '听课', taskType: 'learnCourseModifyModel' }]*/
      // 分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 传递给编辑弹框的数据
      editDialogData: {
        isShow: false, // 控制弹框显示
        params: {}, // 参数
        id: '' // 参数
      },
      //详情
      detailDialogData: {
        isShow: false, // 控制弹框显示
        params: '' // 参数
      }
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      delete obj.createTime
      let params = obj
      getList(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    getTaskTime(params) {
      let text = ''
      switch (params) {
        case false:
          text = '短期'
          break
        case true:
          text = '长期'
          break
      }
      return text
    },
    // 编辑
    showDialog(item) {
      this.editDialogData.isShow = true // 显示编辑弹框
      this.editDialogData.params = item
    },
    //查看详情
    showDetail(item) {
      this.detailDialogData.isShow = true // 显示编辑弹框
      this.detailDialogData.params = item
    },
    // 状态切换提示
    async changeStatus(status, id, index) {
      let _this = this
      if (status === false) {
        // 停用
        this.$confirm(`确定停用该积分策略吗？`, '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            stopStrategy(
              id,
              (response) => {
                this.$message.success('操作成功')
                this.searchList()
              },
              (response) => {
                this.tableData[index].status = true
                this.$message.warning(response.message)
              }
            )
          })
          .catch(() => {
            this.tableData[index].status = true
            /* this.$message({
                             type: "info",
                             message: "已取消停用"
                           }); */
          })
      } else {
        // 启用
        openStrategy(
          id,
          (response) => {
            this.$message.success('操作成功')
            this.searchList()
          },
          (response) => {
            this.tableData[index].status = false
            this.$message.warning(response.message)
          }
        )
      }
    },

    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 编辑后，刷新列表 */
    refresh() {
      this.searchList()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
